<template>
    <el-form :model="properties">
        <el-form-item label="名称" label-width="20%" prop="name">
            <el-input v-model="properties.name" placeholder="名称" clearable />
        </el-form-item>

        <el-form-item label="编码" label-width="20%" prop="code">
            <el-input v-model="properties.code" placeholder="编码" clearable />
        </el-form-item>

        <el-form-item label="审批人类型" label-width="20%">
            <el-radio-group v-model="properties.execType">
                <el-radio label="OR">或签</el-radio>
                <el-radio label="ALL">会签</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="审批人类型" label-width="20%">
            <el-radio-group v-model="properties.peopleType">
                <el-radio label="CUSTOM">自定义</el-radio>
                <el-radio label="INNER_PARAM">内置变量</el-radio>
                <el-radio label="FORM_INTERFACE">表单外部接口</el-radio>
                <el-radio label="THIRD_EXEC">三方服务</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item v-if="properties.peopleType === 'CUSTOM'" label="审批人" label-width="20%" prop="name">
            <el-input v-model="properties.people" placeholder="审批人" clearable />
        </el-form-item>

        <el-form-item v-if="properties.peopleType === 'INNER_PARAM'" label="审批人" label-width="20%" prop="name">
            <el-cascader v-model="properties.peopleInnerParam" :options="peopleOptions" :props="cascaderProps" clearable style="width: 100%" />
        </el-form-item>
    </el-form>
</template>

<script name="YwuApprovalNodeDrawer" setup>
import {computed, defineProps, ref} from "vue";
import {queryFlowFormInfo, queryFlowVersionFormInfo} from "@/request/flow/index.js";

let props = defineProps(['properties', 'globalJson', 'flowDetailJson']);

let properties = computed(() => {return props['properties']})
let flowDetailJson = computed(() => {return props['flowDetailJson']})

let cascaderProps = ref({
    multiple: true
})

let peopleOptions = ref([
    {
        value: "INNER_PARAM",
        label: "内置变量",
        children: [
            {
                value: "START_BY",
                label: "发起人"
            }
        ]
    },
    {
        value: "FORM_PARAM",
        label: "表单变量",
        children: []
    },
    {
        value: "FLOW_PARAM",
        label: "流程变量",
        children: []
    }
])

init()
function init() {
    // 根据表单ID查询表单数据
    if (flowDetailJson.value.status === "DRAFT") {
        // 查询草稿状态的表单数据
        queryFlowFormInfo({id: flowDetailJson.value.id}).then(res => {
            let formJson = res.data.formJson
            // 序列化json
            let jsonInfo = JSON.parse(formJson);
            peopleOptions.value[1].children = jsonInfo.componentJson
            for (let i = 0; i < peopleOptions.value[1].children.length; i++) {
                let item = peopleOptions.value[1].children[i]
                item['label'] = item['labelName']
                item['value'] = item['code']
            }
            if (peopleOptions.value[1].children.length === 0) {
                peopleOptions.value[1].disabled = true;
            }
        })
    } else {
        queryFlowVersionFormInfo({
            resourceId: flowDetailJson.value.resourceId,
            version: flowDetailJson.value.version
        }).then(res => {
            let formJson = res.data.formJson
            // 序列化json
            let jsonInfo = JSON.parse(formJson);
            peopleOptions.value[1].children = jsonInfo.componentJson
            for (let i = 0; i < peopleOptions.value[1].children.length; i++) {
                let item = peopleOptions.value[1].children[i]
                item['label'] = item['labelName']
                item['value'] = item['code']
            }
            if (peopleOptions.value[1].children.length === 0) {
                peopleOptions.value[1].disabled = true;
            }
        })
    }
    // 获取当前流程的变量
    let flowJson = flowDetailJson.value.flowJson
    let flowJsonObj = JSON.parse(flowJson);
    if (!flowJsonObj || !flowJsonObj.globalProperties) {
        flowJsonObj.globalProperties = {tableData: []}
    }
    if (!flowJsonObj.globalProperties.tableData) {
        flowJsonObj.globalProperties.tableData = [];
    }
    let flowParamList = flowJsonObj.globalProperties.tableData;
    for (let i = 0; i < flowParamList.length; i++) {
        let item = flowParamList[i]
        item['label'] = item['paramName']
        item['value'] = item['paramName']
    }
    peopleOptions.value[2].children = flowParamList
    if (peopleOptions.value[2].children.length === 0) {
        peopleOptions.value[2].disabled = true;
    }
}
</script>

<style scoped lang="less">

</style>